import { defineComponent, onMounted, ref, watch, computed, onBeforeUnmount, nextTick } from "vue";

import DesignHeader from '@src/modules/trigger/view/design/components/Header'
import DesignContentWrap from '@src/modules/trigger/view/design/components/ContentWrap'
import ConfigPanel from '@src/modules/trigger/view/design/components/ConfigPanel/main'
import RangeScale from '@src/modules/trigger/components/rangeScale/index.tsx'
import { TriggerType } from '@src/modules/trigger/model/enum/index.ts'
import { useRouter } from '@src/modules/trigger/hooks/useVC.ts'
/* http */
import '@src/modules/trigger/view/design/style/view.scss'
/* utils */
import state from '@src/modules/trigger/view/setting/util/state.js'

import { useDebounceFn } from '@vueuse/core'


export default defineComponent({
    name: TriggerType.triggerDesign,
    setup() {
        const {router, query} = useRouter()
        const mainRef = ref<HTMLDivElement | null>(null)
        const scale = ref(0)
        const loading = ref(false)
        
        const { name: wayName, triggerWay: way, triggerId, desc: description } = query
        const defaultRange = ref(200)
        const configPanelRef = ref<HTMLDivElement | null>(null)
        const triggerDesignBoxRef = ref<HTMLDivElement | null>(null)
        if (!triggerId) {
            state.executeWay.way = way
            state.currentTriggerInfo.name = wayName
            state.currentTriggerInfo.remarks = description
        }

        if (triggerId) {
            state.currentTriggerInfo.triggerId = triggerId
        }
        
        /**
         * @description 当前编辑状态 新建&编辑
         */
        const editStatus = computed(() => {
            return Boolean(triggerId)
        })
        state.editStatus = editStatus.value

        /**
         * @description 鼠标放大的值
         * @param item 鼠标滑动的值 0-100
         */
        const scaleChangeHandler = (item: number) => {
            if (item === 50) {
                scale.value = 1;
            } else if (item === 100) {
                scale.value = 3;
            } else if (item === 0){
                scale.value = 0.5
            } else if (item < 50) {
                scale.value = 0.5 + (item / 50) * 0.5;
            } else {
                scale.value = 1 + ((item - 50) / 50) * 2;
            }
        };

        /**
         * @description 更新默认范围
         */
        const updateDefaultRange = () => {
            const triggerDesignBox = triggerDesignBoxRef.value;
            const configPanel = configPanelRef.value?.$el;
            if (triggerDesignBox && configPanel) {
              const triggerDesignBoxWidth = triggerDesignBox.clientWidth;
              const configPanelRight = parseInt(window.getComputedStyle(configPanel).right, 10);
              const configPanelWidth = configPanel.clientWidth
              if (configPanelRight < 0) {
                  defaultRange.value = triggerDesignBoxWidth / 2;
                } else if (configPanelRight === 0) {
                    defaultRange.value = ((triggerDesignBoxWidth- configPanelWidth) / 2) ;
              }
            }
        };
        const bounceUpdateRange = useDebounceFn(() => {
            updateDefaultRange()
        }, 100)
        watch(
            () => state.data.changeOpenPanel,
            () => {
                nextTick(() => {
                    setTimeout(() => {
                        updateDefaultRange()
                    }, 300)
                })
            }
          );

        watch(scale, (newValue, oldValue) => {
            if (newValue && mainRef.value) {
                // mainRef.value.style.transform = `scale(${newValue})`;
                mainRef.value.style.zoom = `${newValue * 100}%`;
            }
        })

        onMounted(()=> {
            nextTick(() => {
                setTimeout(() => {
                    updateDefaultRange()
                }, 300)
            })
            window.addEventListener('resize', bounceUpdateRange);
        })

        onBeforeUnmount(() => {
            window.removeEventListener('resize', bounceUpdateRange);
        })


        return ()=> (
            <div class="trigger-design-box" v-loading={loading.value} ref={triggerDesignBoxRef}>
                {/* <textarea value={JSON.stringify(state, null, '\t')} style={{resize: 'both',height: '383px',width: '50%'}} class={'temp-textarea'}/> */}
                <DesignHeader triggerId={triggerId}/>
                <div class="trigger-main">
                    <div class="main-wrap" ref={mainRef}>
                        <div class="main-wrap-content"  >
                            <DesignContentWrap triggerId={triggerId} onLoading={(val) => loading.value = val} loading={loading.value} editStatus={editStatus.value}/>
                        </div>
                    </div>
                </div>
                <ConfigPanel ref={el => configPanelRef.value = el}/>
                <div class="trigger-design-box-range-scale" style={{'--left': defaultRange.value + 'px'}}>
                    <RangeScale onScaleChange={(item) => scaleChangeHandler(item)}/>
                </div>
            </div>
        )
    }
}) 